
// MENU
// <nav class="menu"><ul><li><a></a></li></ul></nav>
// --------------------------------------------------
.nav__main {
  /* mini clear */
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after { clear: both; }

  /* all nav list elements */
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    zoom: 1;
    @include transition( all, 0.25s, ease-in-out);

    li {
      padding: 12px 8px;
      position: relative;

      &:hover > a { color: $color1; }

      a, a:link, a:active, a:visited {
        color: $white;
        height: inherit;
        font-size: 14px;
        text-decoration: none;
        @include text-shadow(0px, 1px, 0px, $black, 0);
      }
    }
  }

  a {
      @include transition(all, 0.25s);
  }

  /* top menu */
  & > ul > li > a:hover {
    color: $ltblue;
  }

  /* submenus */
  & > ul {

    ul {
      margin: 5px 0 0 0;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 38px;
      left: 0;
      z-index: 999;
      @include gradient($gray, darken($gray, 15%));
      @include box-shadow();
      @include borderRadius();

      ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        @include box-shadow();
      }

      li {
        float: none;
        display: block;
        border: 0;
        padding: 10px;

        &:first-child { @include borderRadius( $default-radius, $default-radius, 0, 0); }
        &:last-child  { @include borderRadius( 0, 0, $default-radius, $default-radius); }

        // the triangle
        &:first-child:after {
          content: '';
          position: absolute;
          left: 20px;
          top: -6px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid $gray;
        }
        &:first-child:hover:after {
          border-bottom-color: darken($ltblue, 20%);
        }

        &:hover {
          @include gradient( darken($ltblue, 20%), darken($ltblue, 50%) );
          color: $white;
        }
      }

      a {
        width: 100%;
        display: block;
        font-size: 12px !important;
        white-space: nowrap;
        float: none;
        text-transform: none;
      }
    }
  }
}

.no-touch {
    .nav__main > ul {
        // this reveals the child ULs and the hover is only intended for desktop viewing
        & li:hover {
            & > ul {
            opacity: 1;
            visibility: visible;
            margin: 10px 0px 0px 0px;
            }
        }
    }

    .nav__submain {
        display: none;
    }
}


.nav__submain {
  border-top: 1px solid fade-out($white, 0.7);
  padding-top: 5px;

  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after { clear: both; }

  ul {
    margin: 0;
    padding: 0;
  }
  li {
    margin: 0;
    padding: 10px 10px 0;
  }
  a {
    font-wieght: 500;
    text-decoration: none;
  }
}

nav#footer.menu {
  a,
  a:link,
  a:active,
  a:visited {
    text-decoration: none;
    color: $white;
    line-height: 36px;
  }
  a:hover {
    color: $color2;
  }

  ul {
    padding-left: 0;
    height: auto;
    list-style-position: inside;
    margin-left: 0;
  }

  li {
    display: block;
    padding: .125em 0;
    font-family: $fontCopy;
    line-height: inherit;
    border-right: 0 none;
  }

  & > ul  {
    & > li {
      float: left;
      margin-right: 32px;

      & > a {
        font-size: 16px;
        font-weight: bold;
      }

      & > ul > li > a {
        font-size: 12px;
      }
    }
  }
}

// < IE9 Overrides
.no-touch .nav__main > ul li:hover > ul {
  // remove the top margin from <= IE8 so the hover doesn't release in the menu gap
  margin-top: 0px;
}
